<template>
  <div class="partTimeJob">
      <myHead title="兼职"></myHead>
      <header>
      <img src="../../../static/img/dw424.png" alt="" class="back" >
      <div class="address">
        <el-dropdown  @command="handleCommand" trigger="click" >
          <p class="el-dropdown-link">
            <span>{{city}}</span><i class="el-icon-arrow-down el-icon--right"></i>
          </p>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="陕西师范大学">陕西师范大学</el-dropdown-item>
            <el-dropdown-item command="西安交通大学">西安交通大学</el-dropdown-item>
            <el-dropdown-item command="西安音乐学院">西安音乐学院</el-dropdown-item>
            <el-dropdown-item command="西安财经">西安财经</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="search">
        <img src="../../../static/img/sousuo111.png" alt="">
        <span>大家都在说十周年2折起</span>
      </div>
    </header>
      <!--    轮播图-广告  -->
      <div class="index_lunbo">
        <div class="swiper-container" style="width: 100%;height:1.6rem;">
          <div class="swiper-wrapper" style="width: 100%;height:100%">
            <img v-for='el in lunbolist' class="swiper-slide index_swiper_listimg" :src="el.url">
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>
        </div>
      </div>
      <section>
          <div class="rmlx">
              <div class="rmlx-tit">
                <img src="../../../static/img/shugang1.png" alt="">
                <span>热门类型</span>
              </div>
              <div class="rmlx-item">
                <div class="rmlx-box">
                  <img src="../../../static/img/jztt1.png" alt="">
                  <div class="rmlx-stit">
                    <p>高薪兼职</p><p>钱多活少距离近</p>
                  </div>
                </div>
                <div class="rmlx-box">
                  <img src="../../../static/img/jztt2.png" alt="">
                  <div class="rmlx-stit">
                    <p>极速上岗</p><p>随时随地简单</p>
                  </div>
                </div>
              </div>
          </div>
          <div class="zxzp">
            <div class="rmlx-tit rmlx-tit_2">
              <img src="../../../static/img/shugang1.png" alt="">
              <span>最新招聘</span>
            </div>
            <div class="zxzp-item">
                <div class="zxzp-box" v-for="x in recruitList" @click="jump('JobDetails',x.id)">
                    <div class="zxzp-box-name"><p><span>{{x.name}}</span><img src="../../../static/img/huohuo111.png" alt=""></p><p>
                      {{x.salary}}元/月</p></div>
                    <div class="zxzp-box-jl"><p><span>{{x.request}}&nbsp;&nbsp;月结</span></p><p>{{x.addtime | formatDate}}</p></div>
                    <div class="zxzp-box-bq"><p v-for="z in (x.request | request)">{{z}}</p></div>
                </div>
            </div>
          </div>
      </section>
  </div>
</template>

<script>
  import myHead from "../../components/ClientComponents/lib/myHead";
  import Swiper from "swiper";
  import 'swiper/css/swiper.css';
  import {formatDate} from "../../methods/time";

  export default {
    name: "partTimeJob",
    components: {
      myHead
    },
    filters: {
      formatDate(time) {
        time = time * 1000;
        let date = new Date(time);
        return formatDate(date, 'yyyy/MM/dd')
      },
      request(str){
        return JSON.parse(str)
      }
    },
    data(){
      return {
        lunbolist: [{text: '', url: '../../../static/img/jzbanner1.png'}, {text: '', url: '../../../static/img/lifebanner1.png'}, {
          text: '',
          url: '../../../static/img/lifebanner1.png'
        }],
        city:'西安财经',
        recruitList:[],
      }
    },
    created() {
      this.$myAxios('index/Classify/headline_moonlighted','post',{
        user_id:this.$myStorage.query(),
        headline_id:4,
        page:this.page
      }).then(res=>{
        this.recruitList = res.data.headline_moonlighted
      })
    },
    mounted() {
      //    这里配置swiper轮播图
      new Swiper('.swiper-container', {
        loop: true, // 循环模式选项
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination'
        },
        autoplay:true
      });
    },
    methods:{
      handleCommand(command) {
        this.city = command;
      },
      request(str){
        return JSON.parse(str)
      },
      jump(page,id){
        console.log(id)
        this.$router.push({
          name:page,
          query:{id:id}
        })
      }
    }
  }
</script>

<style scoped>
  .partTimeJob {
    width: 100%;
    box-sizing: border-box;
    min-height: 6.67rem;
    padding-top: 1rem;
  }
  header {
    width: 100%;
    height: .5rem;
    position: fixed;
    top: .49rem;
    left: 0;
    z-index: 88;
    background:#FFFFFF;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 .1rem 0 .1rem;
  }
  .back {
    width: .16rem;
    height: .21rem;
  }
  .address {
    width: .8rem;
  }
  .search {
    width:2.48rem;
    height:.29rem;
    background:#F2F2F2;
    border-radius:.14rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    box-sizing: border-box;
    padding: 0 .15rem;
    font-size:.11rem;
    font-weight:500;
    color: #CDCBCB;
  }
  .search>img {
    width: .13rem;
    height: .13rem;
    margin-right: .1rem;
  }
  .el-dropdown-link {
    cursor: pointer;
    color: #C4C4C4;
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  >>> .el-dropdown {
    font-size: .13rem!important;
  }
  >>> .el-icon-arrow-down {
    font-size: .12rem;
  }
  >>> .el-dropdown-menu__item {
    line-height: .36rem;
    padding: 0 .2rem;
    font-size: .14rem;
  }
  >>> .popper__arrow::after {
    top: .01rem;
    margin-left: -.06rem;
    border-top-width: 0;
    border-bottom-color: #FFF;
  }
  >>> .el-dropdown-link>span {
    display: inline-block;
    max-width: .65rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* 轮播图部分 */
  .index_lunbo {
    width: 100%;
    box-sizing: border-box;
    position: relative;
  }
  .index_swiper_listimg {
    width: 100%;
    height: 100%;
  }

  section {
    width: 100%;
    background-color: #FFFFFF;
    box-sizing: border-box;
    padding: 0 .15rem;
  }
  .rmlx {
    margin-bottom: .15rem;
  }
  .rmlx-tit {
    width: 100%;
    height: .5rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    margin-bottom: .05rem;
  }
  .rmlx-tit>img {
    width: .03rem;
    height: .17rem;
    margin-right: .15rem;
  }
  .rmlx-tit>span {
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
  }

  .rmlx-item {
    width: 100%;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .rmlx-box {
    width:1.58rem;
    height:.75rem;
    background:rgba(255,255,255,1);
    border-radius:.05rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    box-shadow: .01rem .01rem .03rem .03rem rgba(0, 0, 0, 0.1);
  }
  .rmlx-box>img {
    margin-right: .15rem;
  }
  .rmlx-box:nth-child(1)>img {
    width: .34rem;
    height: .38rem;
  }
  .rmlx-box:nth-child(2)>img {
    width: .26rem;
    height: .39rem;
  }
  .rmlx-stit {
    height: .39rem;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }
  .rmlx-stit>p:nth-child(1) {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #111110;
    line-height: .14rem;
  }
  .rmlx-stit>p:nth-child(2) {
    font-size:.12rem;
    line-height: .12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #878786;
  }
  .rmlx-tit_2 {
    position: relative;
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .rmlx-tit_2>p {
    position: absolute;
    right: 0;
  }
  .rmlx-tit_2>p>img {
    width: .05rem;
    height: .09rem;
    margin-left: .1rem;
  }
  .rmlx-tit_2>p>span {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:400;
    color: #9F9F9F;
  }

  .zxzp-box {
    width: 100%;
    box-sizing: border-box;
    padding: 0 .15rem;
    border-bottom: .01rem solid #EEEEEE;
    margin-bottom: .2rem;
  }
  .zxzp-box-name {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .zxzp-box-name,.zxzp-box-jl,.zxzp-box-bq {
    margin-bottom: .1rem;
  }
  .zxzp-box-name>p>img {
    width: .12rem;
    height: .14rem;
    margin-left: .15rem;
  }
  .zxzp-box-name>p:nth-child(1) {
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #1C1C1D;
  }
  .zxzp-box-name>p:nth-child(2) {
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #FA6C29;
  }
  .zxzp-box-jl {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .zxzp-box-jl>p {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #A4A4A7;
  }
  .zxzp-box-bq {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
  }
  .zxzp-box-bq>p {
    padding: .05rem;
    background:rgba(252,245,238,1);
    border-radius:.03rem;
    text-align: center;
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    margin-right: .05rem;
  }

</style>
